<template>
	<div class="app-container">
		<!-- 查询条件开始 -->
		<el-form ref="queryForm" :model="queryParams" :inline="true" label-width="98px">
			<el-form-item label="厂家名称" prop="producerName">
				<el-input v-model="queryParams.producerName" placeholder="请输入厂家名称" clearable size="small"
					style="width:180px" />
			</el-form-item>
			<el-form-item label="关键字" prop="keywords">
				<el-input v-model="queryParams.keywords" placeholder="请输入关键字" clearable size="small"
					style="width:180px" />
			</el-form-item>
			<el-form-item label="厂家电话" prop="producerTel">
				<el-input v-model="queryParams.producerTel" placeholder="请输入厂家电话" clearable size="small"
					style="width:180px" />
			</el-form-item>
			<el-form-item label="状态" prop="status">
				<el-select v-model="queryParams.status" placeholder="可用状态" clearable size="small" style="width:180px">
					<el-option v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictLabel"
						:value="dict.dictValue" />
				</el-select>
			</el-form-item>
			<el-form-item label="创建时间">
				<el-date-picker v-model="queryParams.dateRange" size="small" style="width:240px" value-format="yyyy-MM-dd"
					type="daterange" range-separator="-" start-placeholde="开始日期" end-placeholde="结束日期" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="queryAll">搜索</el-button>
				<el-button type="primary" icon="el-icon-refresh" size="mini" @click="cdquery">重置</el-button>
			</el-form-item>
		</el-form>
		<!-- 查询条件结束 -->

		<!-- 表格工具按钮开始 -->
		<el-row :gutter="10" style="margin-bottom: 8px;">
			<el-col :span="1.5">
				<el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="danger" icon="el-icon-delete" size="mini"  @click="del1()">删除
				</el-button>
			</el-col>
		</el-row>
		<!-- 表格工具按钮结束 -->

		<!-- 数据表格开始 -->
		<el-table v-loading="loading" border :data="producerTableList" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" align="center" />
			<el-table-column label="厂家ID" align="center" width="120" prop="producerId" />
			<el-table-column label="厂家名称" width="280" prop="producerName" />
			<el-table-column label="厂家编码" align="center" prop="producerCode" />
			<el-table-column label="联系人" align="center" prop="producerPerson" />
			<el-table-column label="电话" align="center" prop="producerTel" />
			<el-table-column label="关键字" align="center" prop="keywords" />
			<!-- -->
			<el-table-column label="状态" prop="status" align="center" :formatter="statusFormatter" />
			<el-table-column label="创建时间" align="center" prop="createTime" />
			<el-table-column label="操作" align="center">
				<template slot-scope="scope">
					<el-button type="text" icon="el-icon-edit" size="mini" @click="updDept(scope.row)">修改
					</el-button>
					<el-button type="text" icon="el-icon-delete" size="mini"@click="del(scope.row)">删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 数据表格结束 -->
		<!-- 分页控件开始 -->
		<el-pagination v-show="total>0" :current-page="pageNum" :page-sizes="[5, 10, 20, 30]" :page-size="pageSize"
			layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handLeSizeChange"
			@current-change="handleCurrentChange" />
		<!-- 分页控件结束 -->
		<!-- 添加修改弹出层开始 -->
		<el-dialog :title="title" :visible.sync="open" width="600px" center append-to-body>
			<el-form ref="form" :model="form" :rules="rules" label-width="120px">
				<el-form-item el-form-item label="厂家名称" prop="producerName">
					<el-input v-model="form.producerName" placeholder="请输入厂家名称" clearable size="small" />
				</el-form-item>
				<el-form-item label="厂家编码" prop="producerCode">
					<el-input v-model="form.producerCode" placeholder="请输入厂家编码" clearable size="small" />
				</el-form-item>
				<el-form-item label="联系人" prop="producerPerson">
					<el-input v-model="form.producerPerson" placeholder="请输入联系人" clearable size="small" />
				</el-form-item>
				<el-form-item label="电话" prop="producerTel">
					<el-input v-model="form.producerTel" placeholder="请输入电话" clearable size="small" />
				</el-form-item>
				<el-form-item label="关键字" prop="keywords">
					<el-input v-model="form.keywords" placeholder="请输入关键字" clearable size="small" />
				</el-form-item>
				<el-form-item label="地址" prop="producerAddress">
					<el-input v-model="form.producerAddress" placeholder="请输入地址" clearable size="small" />
				</el-form-item>
				<el-form-item label="状态" prop="status">
					<el-radio-group v-model="form.status">
						<el-radio v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictValue"
							:value="dict.dictValue">{{ dict.dictLabel }}</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="handleSubmit">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</span>
		</el-dialog>
		<!-- 添加修改弹出层结束 -->

<!-- selection-change -->
	</div>
</template>
<script>
	// 引入api
	import ax from "axios";
	import qs from "qs";
	export default {
		// 定义页面数据
		data() {
			return {
				multipleSelection:[],
				// 是否启用遮罩层
				loading: false,
				// 选中数组
				ids: [],
				// 非单个禁用
				single: true,
				// 非多个禁用
				multiple: true,
				// 分页数据总条数
				// total: 0,
				// 字典表格数据
				producerTableList: [],
				// 弹出层标题
				title: '',
				// 是否显示弹出层
				open: false,
				// 状态数据字典
				statusOptions: [],
				// 类型数据字典
				typeOptions: [],
				// 时间条件
				dateRange: [],
				// 查询参数
				queryParams: {
					producerName: undefined,
					producerCode: undefined,
					producerTel: undefined,
					status: undefined,
					keywords: undefined
				},
				//分页
				total: 0,
				pageNum: 1,
				pageSize: 5,
				dialogVisible:false,
				// 表单数据
				form: {},
				// 表单校验
				rules: {
					producerName: [{
						required: true,
						message: '厂家名称不能为空',
						trigger: 'blur'
					}],
					producerTel: [{
							required: true,
							message: '联系电话不能为空',
							trigger: 'blur'
						},
						{
							pattern: /^1[3|4|5|7|8|9][0-9]\d{8}$/,
							message: '请输入正确的手机号',
							trigger: 'blur'
						}
					],
					keywords: [{
						required: true,
						message: '查询关键字不能为空',
						trigger: 'blur'
					}]
				}
			}
		},
		// 勾子
		created() {
			//加载系统状态
			// this.initStatus();
			this.initUser();
			this.initStatu();
		},
		methods: {
			
			// initStatus() {
			// 	this.$http.get("stock/api/producer/status/sys_dict_data").then(result => {
			// 		this.statusOptions = result.data.data
			// 	})
			// },
			//查询字典表与本表替换
			initStatu() {
				this.$http.get("stock/api/user/findByType/sys_normal_disable").then(result => {
					this.statusOptions = result.data.data
				})
			},
			
			
			//分页查询
			initUser() {
				this.$http.post("/stock/api/user/searchUser/" + this.pageNum + "/" + this.pageSize, this.queryParams,this.dateRange).then(
					result => {
						this.producerTableList = result.data.data.records;
						this.total = result.data.data.total;
					})
			},
			//分页
			handLeSizeChange(val) {
				this.pageSize = val
				this.initUser()
			},
			//分页
			handleCurrentChange(val) {
				this.pageNum = val
				this.initUser()
			},
			// 打开添加的弹出层
			handleAdd(row) {
				this.open = true
				this.reset()
				this.title = '添加生产厂家信息'
				this.form=JSON.parse(JSON.stringify(row))
			},
			//取消
			cancel() {
		 		this.open = false
				this.title = ''

			},
			//重置
			cdquery(){
				this.queryParams={};
				this.pageNum=1;
				this.initUser();
			},

			//从第一页查询
			queryAll(){
			    this.pageNum=1;
			    this.initUser();
				// this.queryParams={};

			},

			 //添加/修改表单确定按钮触发
			handleSubmit(){
				this.$refs['form'].validate((valid) => {
					if (valid) {
						this.$http.post("/stock/api/user/addstu/", this.form).then(result => {
							this.$message.success(result.data.msg)
							// 关闭弹出对话框
							this.open = false;
							// 重置表单
							this.reset();
							this.title = '';
							//表格回溯到第一页
							this.pageNum = 1;
							// 刷新表格数据
							this.initUser();
						})
					}
			})
			},
			//显示双表关联替换数据
			statusFormatter(row){
				let v=row.status;
				for(var i=0;i<this.statusOptions.length;i++){
					if(this.statusOptions[i].dictValue===v){
						return this.statusOptions[i].dictLabel;
					}
				}
				return "";
			},
			reset(){  //重置表单数据
			                //取消之后清空表单数据
			                this.form = {
			                    deptId: undefined,
			                    deptName: undefined,
			                    deptLeader: undefined,
			                    deptNumber: undefined,
			                    orderNum: 0,
			                    regNumber: 0,
			                    status: '0',
			                }
			            },

			updDept(row){  //表格中修改按钮触发
			    if (this.$refs.form != undefined) {
			        this.$refs.form.clearValidate();
			    }
			    this.title='修改科室信息';
			    //显示弹出对话框
			    this.open = true;
			    this.form.deptId = row.deptId;
			    //采取深克隆的形式
			    this.form = JSON.parse(JSON.stringify(row));
			},

			del(row) {
							//axios 请求后台删除该条数据
							//根据唯一的属性去操作对应的数据	stuid 
							let stuid = row.producerId;
							this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
								confirmButtonText: '确定',
								cancelButtonText: '取消',
								type: 'warning'
							}).then(() => {
								//点击 确认
								ax.delete(`http://localhost:8886/stock/api/user/` + stuid).then(r => {
									if (r.data.t == true) {
										this.$message({			
											type: 'success',
											message: '删除成功!',
										});
									}
									this.initUser()
								})
	
							}).catch(() => {
								this.$message({
									type: 'info',
									message: '已取消删除'
								});
							});
						},

			del1(row) {
				//axios 请求后台删除该条数据
				//根据唯一的属性去操作对应的数据	stuid
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					//点击 确认
					ax.post(`http://localhost:8886/stock/api/user/del1/` ,this.multipleSelection).then(r => {

						if (r.data.t == true) {
							this.$message({
								type: 'success',
								message: '删除成功!',
							});
						}
						this.queryAll()
					})

				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
				handleSelectionChange(val){
					this.multipleSelection=val
				}
		}
	}
</script>
